<template>
  <div class="layout page-schedule">
    <Row>
      <Col span="6"><Button type="primary" icon="md-add" @click="onEdit('')">{{$t('page.schedule.add')}}</Button></Col>
      <Col span="18" class="right">
      <Form inline>
        <FormItem style="margin-bottom:0">
          <Checkbox v-model="filter.hideoff" border style="padding:0 10px">{{$t('page.schedule.search.hideoff')}}</Checkbox>
        </FormItem>
        <FormItem style="margin-bottom:0">
          <Checkbox v-model="filter.post" border style="padding:0 10px">{{$t('page.schedule.search.incpost')}}</Checkbox>
        </FormItem>
        <FormItem style="margin-bottom:0">
          <Input v-model="filter.keyword" search clearable :placeholder="$t('search.title')" />
        </FormItem>
      </Form>
      </Col>
    </Row>
    <Divider />
    <Table :columns="columns" :data="filterSchedule" border :loading="schedule.loading">
      <template slot-scope="{ row, index }" slot="status">
        <StatusBadge v-if="!row.post" :content="$t('page.schedule.schtip.' + (row.status[0]==='processing'?'statuson':'statusoff'))" :badge="row.status[0]" :status="row.status[2]" @onChanged="onStatusChanged(row.name)" :error="row.isError">
          <Time v-if="row.nextTime" :time="row.nextTime" :interval="1" />
        </StatusBadge>
      </template>
      <template slot-scope="{ row, index }" slot="validTime">
        <div class="center">
          {{row.startTime}} ~ {{row.endTime?'':$t('page.schedule.schtip.forever')}}
        </div>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <ButtonGroup>
          <Button @click="onView(row.name)">{{$t('button.view')}}</Button>
          <Button type="primary" @click="onEdit(row.name)">{{$t('button.edit')}}</Button>
        </ButtonGroup>
      </template>
    </Table>
    <ScheduleEdit ref="editor" @onRefresh="onRefresh"></ScheduleEdit>
    <ScheduleView ref="viewer"></ScheduleView>
  </div>
</template>

<script>
  import StatusBadge from '@/components/statusbadge'
  import ScheduleEdit from './comp/scheduleedit'
  import ScheduleView from './comp/scheduleview'
  export default {
    components: { StatusBadge, ScheduleEdit, ScheduleView },
    data() {
      return {
        filter: {
          hideoff: false,
          post: true,
          keyword: ''
        },
        columns: [
          { title: '', slot: 'status', width: 50, align: 'center' },
          { renderHeader: (h, col) => { return h('span', this.$t('page.schedule.schtb.name')) }, key: 'name', minWidth: 100 },
          { renderHeader: (h, col) => { return h('span', this.$t('page.schedule.schtb.task')) }, key: 'task', minWidth: 100 },
          { renderHeader: (h, col) => { return h('span', this.$t('page.schedule.schtb.cron')) }, key: 'cron', minWidth: 100 },
          { renderHeader: (h, col) => { return h('span', this.$t('page.schedule.schtb.validTime')) }, slot: 'validTime', width: 200 },
          { renderHeader: (h, col) => { return h('span', this.$t('form.remark')) }, key: 'remark', ellipsis: true, tooltip: true, width: 200 },
          { title: '', slot: 'action', width: 180, align: 'center' }
        ],
        schedule: {
          list: [],
          loading: true,
        },
      }
    },
    computed: {
      postSchedules() {
        let schedules = this.schedule.list || []
        let posts = []
        let schedule
        for (let i in schedules) {
          schedule = schedules[i]
          if (schedule.post) posts.push(schedule)
        }
        return posts
      },
      filterSchedule() {
        let schedules = this.schedule.list
        let schedule
        let filterResults = []
        let hideoff = this.filter.hideoff
        let post = this.filter.post
        let keyword = this.filter.keyword
        let passed // 是否通过校验
        for (let i in schedules) {
          schedule = schedules[i]
          passed = post || !schedule.post
          if (!passed) continue
          if (keyword) passed = (schedule.name.indexOf(keyword) !== -1) || (schedule.remark.indexOf(keyword) !== -1) || (schedule.task.indexOf(keyword) !== -1)
          if (!passed) continue
          if (hideoff) passed = (schedule.post || schedule.status[0] === 'processing')
          if (!passed) continue
          filterResults.push(schedule)
        }
        return filterResults
      }
    },
    mounted() {
      this.loadSchedule()
    },
    methods: {
      loadSchedule() {
        this.schedule.loading = true
        this.$md.dispatch('schedule_list').then(data => {
          if (data.retCode === 1) {
            let schedules = data.data || []
            let schedule
            let now = new Date().getTime()
            for (let i in schedules) {
              schedule = schedules[i]
              schedule.endTime = schedule.endTime || ''
              if (!schedule.post) schedule.isError = (now - new Date(schedule.nextTime).getTime() > 300000)
              if (schedule.status) schedule.status = this.$util.nodeStatus(schedule.status)
            }
            this.schedule.list = schedules
          }
          this.schedule.loading = false
        })
      },
      onEdit(name) {
        let schedule
        if (name) schedule = this.$collect.findByProp(this.schedule.list, 'name', name)
        this.$refs.editor.show(schedule, this.postSchedules)
      },
      onRefresh() {
        this.loadSchedule()
      },
      onView(name) {
        let schedule = this.$collect.findByProp(this.schedule.list, 'name', name)
        this.$refs.viewer.show(schedule)
      },
      onStatusChanged(name) {
        // 发起远程请求
        this.$md.dispatch('schedule_status', { data: name }).then(data => {
          if (data.retCode === 1) {
            this.$Message.success(this.$t('submitok'))
            this.loadSchedule()
          }
        })
      },
    }
  };
</script>
